<template>
	<view style="width: 100vw;height: 100vh;display:flex;flex-direction: column;" class="flex flex-direction">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed flex justify-between align-center" :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}" style="font-size: 32rpx;" >
				<text class=" cuIcon-back margin-left" @click="back" style="font-size: 40rpx;"></text>
				<text >
					创作中心
				</text>
				<text class=" text-blue margin-right" @click="select()" >发布</text>
			</view>
		</view>
		<!-- 数据 -->
		<view class="flex bg-white margin-top-xs padding align-center " style="animation: slide-right 1s 1;">
			<!-- 总阅读量 -->
			<view class="flex flex-direction flex-sub align-center">
				<text class="text-gray margin-bottom-sm">总阅读量</text>
				<text style="font-size: 32rpx;font-weight: 400;">{{totalViewCount}}</text>
				<text class="text-grey margin-top-sm">昨日{{lastViewCount}}</text>
			</view>
			<!-- 总粉丝 -->
			<view class="flex flex-direction flex-sub align-center">
				<text class="text-gray margin-bottom-sm">总粉丝</text>
				<text style="font-size: 32rpx;font-weight: 400;">{{currentFanCount}}</text>
				<text class="text-grey margin-top-sm">昨日{{lastFanCount}}</text>
			</view>
			<!-- 总收益 -->
			<view class="flex flex-direction flex-sub align-center" v-show="develop">
				<text class="text-gray margin-bottom-sm">总收益</text>
				<text style="font-size: 32rpx;font-weight: 400;">345.6</text>
				<text class="text-grey margin-top-sm">昨日1.6k</text>
			</view>
		</view>
		<!-- 功能栏 -->
		<view class="flex bg-white padding margin-top-xs" style="animation: slide-left 1.4s 1;">
			<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'dataHelper'})">
				<text class="cuIcon-calendar" style="font-size: 50rpx;"></text>
				<text>数据助手</text>
			</view>
			<view class="flex flex-direction flex-sub align-center" v-if="develop">
				<text class="cuIcon-moneybag" style="font-size: 50rpx;"></text>
				<text>提现</text>
			</view>
			<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'drafts'})">
				<text class="cuIcon-text" style="font-size: 50rpx;"></text>
				<text>草稿箱</text>
			</view>
			<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'GoodsColumn'})">
				<text class="cuIcon-goods" style="font-size: 50rpx;"></text>
				<text>好物推荐</text>
			</view>
		</view>
		<!-- 我的作品 -->
		<view class="margin-top-xs bg-white flex-sub flex flex-direction" style="animation:slide-bottom 1.6s 1">
			<view class="padding bg-white"><text style="font-size: 32rpx; font-weight: 600;">我的作品</text></view>
			<!-- 轮播展示 -->
			<view class="margin-top-xs flex-sub flex flex-direction">
				<!-- tab -->
				<view class="flex padding ">
					<view v-for="(tab,index) in tablist" :key="index" class="flex-sub flex justify-center"
						:class="[currentIndex==index?'text-blue':'']" @tap="change(index)">{{tab}}</view>
				</view>

				<swiper :current="currentIndex" @change="onSwiperchange" class="flex-sub">
					<swiper-item v-for="(page,i) in tablist" :key="i">
						<scroll-view scroll-y style="width: 100%;height: 100%;">

							<view v-show="i==0">
								<view v-for="(item,j) in articleList" :key="j" class="margin-lr"
									style="border-bottom: 4rpx solid #c1c1c1;">
									<view @click="$Router.push({name:'article',params:{id:item.id}})">

										<!-- 标题 -->
										<view class="margin-bottom-xs" style="font-weight: 600;font-size: 36rpx;white-space: nowrap;overflow: hidden;
										text-overflow:ellipsis;">{{item.title}}</view>

										<!-- 正文 -->
										<view class="flex justify-between">
											<rich-text
												style="flex:1;overflow: hidden;display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3 "
												:nodes="item.content"></rich-text>
											<view v-if="item.imglist.length==1" style="width: 250rpx; height: 118rpx;margin-left: 40rpx;">
												<image :src="item.imglist[0]" mode="aspectFill" style="width: 100%;height: 100%;"
													></image>
											</view>
										</view>
										<!-- 多张图片 -->
										<view v-if="item.imglist.length>1" class="flex  margin-top margin-bottom-xs ">
											<view v-for="(img,index3) in item.imglist" :key="index3"
												style="width: 250rpx; height: 125rpx;">
												<image :src="img" mode="aspectFit" style="width: 100%;height: 100%;">
												</image>
											</view>
										</view>
										<!-- 阅读量 -->
										<view class="flex  justify-between margin-top ">
											<view class="margin-bottom">阅读量{{item.viewCount}}</view>
											<button class="cu-btn block bg-gradual-green "
												style="width: 40rpx;height: 40rpx;" @click.stop="deleteArticle(item,j)">
												<text class="cuIcon-delete"
													style="font-weight: 600;font-size: 36rpx"></text>
											</button>
										</view>
									</view>
								</view>
							</view>
							<view v-show="i==1">
								<!-- <view v-for="(item,j) in bookList" :key="j" class="margin-lr" style="border-bottom: 4rpx solid #c1c1c1;"> -->
								<view v-for="(item,j) in bookList" :key="j" class="margin-lr margin-top"
									style="border-bottom: 4rpx solid #c1c1c1;">
									<view class="flex" @click="$Router.push({name:'bookDetail',params:{id:item.id}})">
										<view class="margin-right">
											<image :src="item.cover" mode="aspectFill"
												style="height: 320rpx;width: 250rpx;"> </image>
										</view>
										<view class="flex-sub flex flex-direction justify-between"
											style="position: relative;">
											<view>
												<view style="font-weight: 600; margin-bottom: 30rpx;">{{item.title}}
												</view>
												<view
													style="display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2 ;overflow:hidden;flex-sub">
													{{item.description}}
												</view>
											</view>

											<view class="flex justify-between align-center">
												<view>播放量：{{item.viewCount}}</view>
												<button class="cu-btn block bg-gradual-green "
													style="width: 40rpx;height: 40rpx;"
													@click.stop="deleteBook(item,j)">
													<text class="cuIcon-delete"
														style="font-weight: 600;font-size: 36rpx"></text>
												</button>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 课程 -->
							<view v-show="i==2">
								<view v-for="(item,j) in courseList" :key="j" class="margin-lr margin-top"
									style="border-bottom: 4rpx solid #c1c1c1;">
									<view class="flex"  @click="$Router.push({name:'courseDetail',params:{id:item.id}})">
										<!-- 封面 -->
										<view class="margin-right">
											<image :src="item.cover" mode="aspectFill"
												style="height: 280rpx;width: 250rpx;"> </image>
										</view>
										<!-- 书籍、期刊基本信息 -->
										<view class="flex-sub flex flex-direction" style="position: relative;">
											<!-- 题目、书名 -->
											<view style="font-weight: 600; margin-bottom: 30rpx;">{{item.title}}</view>
											<!-- 描述信息 -->
											<view
												style=" 
			display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2 ;overflow:hidden;font-weight: 500;color: rgba(255, 59, 48, 1);flex:1">
												￥{{item.price}}</view>
											<!-- 相关统计信息 -->
											<view class="flex justify-between">
												<view>{{item.buyCount}}人购买</view>
												<button class="cu-btn block bg-gradual-green "
													style="width: 40rpx;height: 40rpx;"
													@click.stop="openDelete(item,j)">
													<text class="cuIcon-delete"
														style="font-weight: 600;font-size: 36rpx"></text>
												</button>
											</view>
											<view class="cu-modal" :class="isShow?'show':''"  @tap.stop="hideModal">
												<view class="cu-dialog" style="width: 80vw;" @tap.stop="">
														<view class="flex flex-direction justify-center" >
															<view class=" flex justify-between align-center" style="padding:20rpx 32rpx;">
																<text>删除选项</text>
																<text class="cuIcon-close" style="font-size: 36rpx;font-weight: 600;" @tap.stop="hideModal"></text>
															</view>
															<view style="width: 80vw;height: 20vh;">
															<scroll-view scroll-y style="height: 100%;">
																<!-- 删除课程 -->
															<view style="margin-left:28rpx;margin-right:28rpx;
																border-bottom: 4rpx solid #cecece;padding: 20rpx;"class="flex justify-between align-center flex-sub text-left">
																<view >删除整个课程</view>
																<button class="cu-btn block bg-blue "
																	style="width: 40rpx;height: 40rpx;"
																	@click.stop="deleteCourse(item,j)">
																	<text class="cuIcon-delete"
																		style="font-weight: 600;font-size: 26rpx"></text>
																</button>
															</view>	
															<!-- 删除章节 -->
															<view v-for="(chapter,index) in chapterList"
																:key="index" style="margin-left:28rpx;margin-right:28rpx;
																border-bottom: 4rpx solid #cecece;padding: 20rpx;">
																<view
																	class="flex justify-between align-center flex-sub text-left">
																	<view style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">删除{{chapter.title}}</view>
																	<button class="cu-btn block bg-blue "
																		style="width: 40rpx;height: 40rpx;"
																		@click.stop="deleteChapter(chapter,index)">
																		<text class="cuIcon-delete"
																			style="font-weight: 600;font-size: 26rpx"></text>
																	</button>
																</view>
															</view>
															</scroll-view>
															</view>
														</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 发布选项 -->
		<popup :type="position" ref="popup">
			<view style="width: 100%;height: 300rpx;" class="bg-white padding">
				
					<!-- 头像 名称-->
					<view class="flex align-center">
						<view class="cu-avatar round margin-right-sm"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);">
						</view>
						<text>{{$store.getters.username}}</text>
					</view>
			
				<!-- 选择 -->
				<view class="padding flex justify-center align-center">
					<!-- 文章 -->
					<view class="flex flex-direction align-center flex-sub" @click="createArticle">
						<text class="cuIcon-text text-blue" style="font-size: 40rpx;"></text>
						<text>文章</text>
					</view>
					<!-- 课程 -->
					<view class="flex flex-direction align-center flex-sub" @click="createCourse">
						<text class="cuIcon-read text-blue" style="font-size:40rpx ;"></text>
						<text>课程</text>
					</view>
					<!-- 讲书 -->
					<view class="flex flex-direction align-center flex-sub" @click="createBook">
						<text class="cuIcon-read text-blue" style="font-size:40rpx ;"></text>
						<text>讲书</text>
					</view>
				</view>
				<!-- 取消按钮 -->
				<view class="flex justify-center" @click="close">
					<text class="cuIcon-close" style="font-size: 50rpx;font-weight: 600;"></text>
				</view>

			</view>
		</popup>

	</view>
</template>

<script>
	import artcell from '../../components/column/artcell.vue'
	import singlecell from '../../components/column/singlecell.vue'
	import cuCustom from '../../plugin/colorui/components/cu-custom.vue'
	import popup from '../../components/uni-popup/uni-popup.vue';
	export default {
		components: {
			cuCustom,
			artcell,
			singlecell,
			popup
		},
		data() {
			return {
				totalViewCount:0,//总阅读量
				lastViewCount:0,//昨日阅读量
				currentFanCount:1,//总粉丝量
				lastFanCount:1,//昨日粉丝量
				isShow: false, //是否显示删除弹窗
				position: "bottom", //弹出框位置
				tablist: [ '文章', '讲书', '课程'],
				currentIndex: 0,
				articleList: [],
				courseList: [], //课程列表
				chapterList: [], //某一课程的章节列表
				bookList: [],
			}
		},
		onLoad() { 
			this.getMyData()
		},
		onShow() {
			this.getMyData()
		},
		methods: {
			getMyData(){
				// 获取总阅读量
				this.$http.get('/edu/view-content/getTotalViewCount/' + this.$store.getters.userid).then(res =>{
					this.totalViewCount=res.data.result
				})
				// 获取昨日阅读量
				this.$http.get('/edu/view-content/getLastViewCount/'+this.$store.getters.userid).then(res =>{
					let {result}=res.data
					this.lastViewCount=Object.values(result)[0]
				})
				//获取昨日粉丝量
				this.$http.get('/ucenter/follow/getLastFanCount/'+ this.$store.getters.userid).then(res =>{
					let {result}=res.data
					this.lastFanCount=Object.values(result)[0]
				})
				
				this.$http.get('/edu/article/getArticleList/' + this.$store.getters.userid).then((res) => {
					this.articleList = res.data.result
					this.articleList.forEach((item) => {
						item["imglist"] = item.cover.split(',')
						item.content=item.content.replace(/<img[^>]*>/gi,function(match,capture){
							match=""
							return match
						})
					})
				})
				this.$http.get('/edu/book/getCreateBookList/' + this.$store.getters.userid).then((res) => {
					this.bookList = res.data.result
					// console.log(this.bookList)
				})
				this.$http.get('/edu/course/getOwnCourse/' + this.$store.getters.userid).then((res) => {
					this.courseList = res.data.result
					// console.log(this.courseList)
				})
			},
			change(index) {
				this.currentIndex = index //点击选择tab
			},
			onSwiperchange(e) {
				this.currentIndex = e.detail.current //轮播与tab栏一致
				// 提示发布作品
				if(this.currentIndex==1 && !this.bookList.length){
					this.$tip.confirm('您尚未发布讲书，立即开始创作吧').then(res=>{
						this.$Router.push({name:'createBook'})
					}).catch(res =>{})
				}
				if(this.currentIndex==0 && !this.articleList.length){
					this.$tip.confirm('您尚未发布文章，立即开始创作吧').then(res=>{
						this.$Router.push({name:'createArticle'})
					}).catch(res =>{})
				}
				if(this.currentIndex==2 && !this.courseList.length){
					this.$tip.confirm('您尚未发布课程，立即开始创作吧').then(res=>{
						this.$Router.push({name:'createCourse'})
					}).catch(res =>{})
				}
			},
			select() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			createArticle() {
				this.$Router.push({
					name: 'createArticle'
				})
				this.$refs.popup.close()
			},
			createCourse() {
				this.$Router.push({
					name: 'createCourse'
				})
				this.$refs.popup.close()
			},
			createBook() {
				this.$Router.push({
					name: 'createBook'
				})
				this.$refs.popup.close()
			},
			back() {
				this.$Router.replace({
					name: "indexFrontEnd",
					params: {page: 'mine'}
				})
			},
			deleteArticle(item, index) {
				// console.log(index,item)
				this.$http.delete(`/edu/article/deleteOwnArticle/${item.id}/${item.userId}`).then((res) => {
					if (res.data.success) {
						this.articleList.splice(index, 1)
						this.$tip.success('删除成功')
					}
				})
			},
			deleteBook(item, index) {
				this.$http.delete(`/edu/book/deleteOwnBook/${item.id}/${item.userId}`).then((res) => {
					if (res.data.success) {
						this.bookList.splice(index, 1)
						this.$tip.success('删除成功')
					} else {
						this.$tip.alert(res.data.message)
					}
				})
			},
			openDelete(item,index) {
				// console.log(item,index)
				this.isShow = true
				this.$http.get('/edu/course/getCourseInfo/'+item.id+'/'+item.teacherId).then((res)=>{
					this.chapterList=res.data.result.courseChapterVos
					// console.log(this.chapterList)
				})
			},
			//删除整个课程
			deleteCourse(item,index){
				// console.log(item)
				this.$http.delete('/edu/course/deleteOwnCourse/'+item.id+'/'+item.teacherId).then((res)=>{
					if(res.data.success){
						this.courseList.splice(index,1)
						this.isShow=false
						this.$tip.success('删除成功')
						this.chapterList=[]
					}
				})
			},
			//删除某一章节
			deleteChapter(item,index){
				// console.log(item)
				this.$http.delete('/edu/course-chapter/deleteChapter/'+item.id).then(res =>{
					if(res.data.success){
						this.chapterList.splice(index,1)
						this.$tip.success('删除成功')
					}
				})
			},
			hideModal() {
				this.isShow = false
			}
		}
	}
</script>

<style>
	.tab {
		font-size: 32rpx;
		font-weight: 600;
		/* position: sticky;
		top: 30px; */
		z-index: 10000;
		height: 100rpx;
	}

	swiper {
		width: 100%;
	}
</style>
